<template>
  <div class="widget-tab" :style="style">
    <div class="widget-tab-item"
         v-for="(item, index) in cptData.options"
         :class="{active: item.value === cptData.value}"
         :key="index" @click="onTabClick(item)" :style="getStyle(item)">
      {{item.label}}
    </div>
  </div>
</template>

<script>
import refreshMixin from "@/package/widget/mixins/refreshMixin";

export default {
  name: "widget-tab",
  props: {
    option: Object
  },
  mixins: [refreshMixin],
  data() {
    return {
      cptData: {
        value: '',
        options: []
      },
      uuid: null
    }
  },
  created() {
    this.uuid = require('uuid').v1();
    this.refreshCptData();
  },
  methods: {
    onTabClick(item) {
      this.cptData.value = item.value
      this.$emit("clickHandler", this.option.interaction, item.value, item.value)
    },
    getStyle(item) {
      const attribute = this.option.attribute
      const style = this.fillStyle(attribute)

      if(item.value === this.cptData.value) {
        const activeStyle = this.fillStyle(attribute.active)
        return activeStyle
      }
      return style
    },
    fillStyle(attr) {
      const style = {
        fontFamily: attr.fontFamily,
        fontSize: attr.textSize + 'px',
        color: attr.color,
        fontWeight: attr.fontWeight,
        background: attr.backgroundColor,
      }

      if(attr.backgroundImage) {
        style.background = `url(${attr.backgroundImage})`
        style.backgroundSize = `100% 100%`
      }
      return style
    }
  },
  computed: {
    style() {
      const attribute = this.option.attribute
      const style = {

      }
      style['--bd-radius'] = attribute.radius + 'px'
      return style
    }
  }
}
</script>

<style lang="less">
.widget-tab {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #FFF;
  display: flex;
  --bd-radius: 0px;

  &-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all .3s ease-in-out;
    cursor: pointer;

    &.active {
      color: #00deff;
    }

    &:first-child {
      border-top-left-radius: var(--bd-radius);
      border-bottom-left-radius: var(--bd-radius);
    }
    &:last-child {
      border-top-right-radius: var(--bd-radius);
      border-bottom-right-radius: var(--bd-radius);
    }
  }
}
</style>
